Reactã®äžŠè¡ã¬ã³ããªã³ã°ã¹ã±ãžã¥ãŒã©ãšãé«ããã©ãŒãã³ã¹ã§å¿çæ§ã®é«ãã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®é«åºŠãªãã¬ãŒã ã¿ã€ã ããžã§ãã管çæè¡ã培åºè§£èª¬ã
Reactã®äžŠè¡ã¬ã³ããªã³ã°ã¹ã±ãžã¥ãŒã©ããã¹ã¿ãŒããïŒãã¬ãŒã ã¿ã€ã ããžã§ãã管ç
é²åãç¶ããWebéçºã®äžçã«ãããŠãã·ãŒã ã¬ã¹ã§å¿çæ§ã®é«ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ïŒUXïŒãæäŸããããšã¯æãéèŠã§ããäžçäžã®ãŠãŒã¶ãŒã¯ãããã€ã¹ããããã¯ãŒã¯ç¶æ³ãUIã®è€éãã«é¢ããããã¢ããªã±ãŒã·ã§ã³ãé«éã§ãã¹ã ãŒãºã«ããããŠã€ã³ã¿ã©ã¯ãã£ãã§ããããšãæåŸ ããŠããŸããææ°ã®JavaScriptãã¬ãŒã ã¯ãŒã¯ãç¹ã«Reactã¯ããããã®èŠæ±ã«å¿ããããã«å€§ããªé²æ©ãéããŸãããReactããããå®çŸããèœåã®æ žå¿ã«ããã®ããæŽç·Žããã䞊è¡ã¬ã³ããªã³ã°ã¹ã±ãžã¥ãŒã©ã§ããããã¯ãã¬ã³ããªã³ã°äœæ¥ãããã€ã³ããªãžã§ã³ãã«ç®¡çãããããŠæ±ºå®çã«éèŠãªãã¬ãŒã ã¿ã€ã ããžã§ããã管çããããã®åŒ·åãªã¡ã«ããºã ã§ãã
ãã®å æ¬çãªã¬ã€ãã§ã¯ãReactã®äžŠè¡ã¬ã³ããªã³ã°ã¹ã±ãžã¥ãŒã©ã®è€éããæ·±ãæãäžããç¹ã«ãã¬ãŒã ã¿ã€ã ããžã§ãããã©ã®ããã«ç®¡çãããã«çŠç¹ãåœãŠãŸãããã®åºæ¬ååã解決ãã課é¡ããããŠéçºè ããã®æ©èœã掻çšããŠé«æ§èœã§ã°ããŒãã«ã«ã¢ã¯ã»ã¹å¯èœãªã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®å®è·µçãªæŠç¥ãæ¢ããŸãã
ãã¬ãŒã ã¿ã€ã ããžã§ãã管çã®éèŠæ§
Reactã®å ·äœçãªå®è£ ã«é£ã³èŸŒãåã«ããªãçŸä»£ã®Webã¢ããªã±ãŒã·ã§ã³ã«ãšã£ãŠãã¬ãŒã ã¿ã€ã ããžã§ãã管çãããã»ã©éèŠãªã®ããçè§£ããããšãäžå¯æ¬ ã§ããããã¬ãŒã ããšããæŠå¿µã¯ã1åã®ç»é¢æŽæ°ãæããŸããã»ãšãã©ã®ãã£ã¹ãã¬ã€ã§ã¯ãããã¯1ç§éã«60åçºçããåãã¬ãŒã ã®ã¬ã³ããªã³ã°ã«ã¯çŽ16.67ããªç§ïŒmsïŒãäžããããŠããããšãæå³ããŸããããã¯äžè¬çã«16msããžã§ãããšåŒã°ããŸãã
Webã¢ããªã±ãŒã·ã§ã³ããã®ããžã§ãããããé·ãæéããããŠãã¬ãŒã ãã¬ã³ããªã³ã°ãããšããã©ãŠã¶ã¯ãã®ãã¬ãŒã ãããããããããã«ã¯ã€ããããã¡ãªããå¿çæ§ã®ãªãUIãåŒãèµ·ãããŸããããã¯ãŠãŒã¶ãŒã«ãšã£ãŠããã«æ°ã¥ãããç¹ã«ã¢ãã¡ãŒã·ã§ã³ãã¹ã¯ããŒã«ããã©ãŒã å ¥åãªã©ã®ã€ã³ã¿ã©ã¯ãã£ããªã³ã³ããŒãã³ãã§ã¯äžå¿«ãªãã®ã§ãã
åŸæ¥ã®ã¬ã³ããªã³ã°ã«ããã課é¡ïŒ
- é·æéå®è¡ãããã¿ã¹ã¯ïŒ 䞊è¡åŠç以åã®æä»£ãReactïŒããã³ä»ã®å€ãã®ãã¬ãŒã ã¯ãŒã¯ïŒã¯åäžã®åæã¹ã¬ããã§åäœããŠããŸãããã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ã«æéããããããããšãã¡ã€ã³ã¹ã¬ããããããã¯ããã¬ã³ããªã³ã°ãå®äºãããŸã§ãŠãŒã¶ãŒã®ã€ã³ã¿ã©ã¯ã·ã§ã³ïŒã¯ãªãã¯ãã¿ã€ãã³ã°ãªã©ïŒã®åŠçã劚ããŠããŸããã
- äºæž¬äžèœãªããã©ãŒãã³ã¹ïŒ ã¬ã³ããªã³ã°ã®ããã©ãŒãã³ã¹ã¯éåžžã«äºæž¬äžèœã§ãããããŒã¿ãUIã®è€éãã®ããããªå€åããã¬ã³ããªã³ã°æéãå€§å¹ ã«å€ããå¯èœæ§ããããã¹ã ãŒãºãªãšã¯ã¹ããªãšã³ã¹ãä¿èšŒããããšãå°é£ã§ããã
- åªå é äœä»ãã®æ¬ åŠïŒ ãã¹ãŠã®ã¬ã³ããªã³ã°ã¿ã¹ã¯ã¯åãéèŠåºŠã§æ±ãããŠããŸãããç·æ¥ã®æŽæ°ïŒäŸïŒãŠãŒã¶ãŒå ¥åïŒããéèŠåºŠã®äœãæŽæ°ïŒäŸïŒããã¯ã°ã©ãŠã³ãã§ã®ããŒã¿ååŸïŒãããåªå ããåºæã®ã¡ã«ããºã ã¯ãããŸããã§ããã
ãããã®èª²é¡ã¯ãã°ããŒãã«ãªæèã§ã¯ããã«å¢å¹ ãããŸããã€ã³ã¿ãŒãããã€ã³ãã©ãè匱ãªå°åãå€ãããã€ã¹ããã¢ããªã±ãŒã·ã§ã³ã«ã¢ã¯ã»ã¹ãããŠãŒã¶ãŒã¯ãããã«å€§ããªéå£ã«çŽé¢ããŸããäžé©åã«ç®¡çããããã¬ãŒã ã¿ã€ã ããžã§ããã¯ãäžçã®ãŠãŒã¶ãŒã®ããªãã®éšåã«ãšã£ãŠãã¢ããªã±ãŒã·ã§ã³ãäºå®äžäœ¿çšäžå¯èœã«ããå¯èœæ§ããããŸãã
Reactã®äžŠè¡ã¬ã³ããªã³ã°ã®å°å ¥
Reactã®äžŠè¡ã¢ãŒãïŒçŸåšã¯React 18ã§ããã©ã«ãïŒã¯ãReactãã¢ããªã±ãŒã·ã§ã³ãã¬ã³ããªã³ã°ããæ¹æ³ã«æ ¹æ¬çãªå€åããããããŸããããã®äžå¿çãªã¢ã€ãã¢ã¯ãReactãã¬ã³ããªã³ã°ãäžæãäžæåæ¢ãåéã§ããããã«ããããšã§ããããã¯ããã©ãŠã¶ã®ã¬ã³ããªã³ã°ãã€ãã©ã€ã³ãèªèããã¿ã¹ã¯ãããã«å¿ããŠåªå é äœä»ãã§ããæ°ããã¹ã±ãžã¥ãŒã©ã«ãã£ãŠå®çŸãããŸãã
äž»èŠãªæŠå¿µïŒ
- ã¿ã€ã ã¹ã©ã€ã·ã³ã°ïŒ ã¹ã±ãžã¥ãŒã©ã¯ãå€§èŠæš¡ã§åæçãªã¬ã³ããªã³ã°ã¿ã¹ã¯ãããå°ããªãã£ã³ã¯ã«åå²ããŸãããããã®ãã£ã³ã¯ã¯è€æ°ã®ãã¬ãŒã ã«ããã£ãŠå®è¡ã§ããReactããã£ã³ã¯éã§ãã©ãŠã¶ã«å¶åŸ¡ãæ»ãããšãå¯èœã«ããŸããããã«ãããã¡ã€ã³ã¹ã¬ããããŠãŒã¶ãŒã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãã€ãã³ããã³ããªã³ã°ãªã©ã®éèŠãªã¿ã¹ã¯ã®ããã«å©çšå¯èœãªç¶æ ãç¶æã§ããŸãã
- åå ¥å¯èœæ§ïŒRe-entrancyïŒïŒ Reactã¯ãã³ã³ããŒãã³ãã®ã©ã€ããµã€ã¯ã«ã®éäžã§ã¬ã³ããªã³ã°ãäžæåæ¢ããåŸã§ãå Žåã«ãã£ãŠã¯ç°ãªãé åºã§ããŸãã¯ä»ã®ã¿ã¹ã¯ãå®äºããåŸã«åéã§ããããã«ãªããŸãããããã¯ãç°ãªãçš®é¡ã®æŽæ°ã亀äºã«åŠçããããã«äžå¯æ¬ ã§ãã
- åªå é äœïŒ ã¹ã±ãžã¥ãŒã©ã¯ãç°ãªãã¬ã³ããªã³ã°ã¿ã¹ã¯ã«åªå é äœãå²ãåœãŠãŸããããšãã°ãç·æ¥ã®æŽæ°ïŒå ¥åãã£ãŒã«ããžã®ã¿ã€ãã³ã°ãªã©ïŒã¯ãç·æ¥æ§ã®äœãæŽæ°ïŒAPIãããã§ãããããªã¹ãã®æŽæ°ãªã©ïŒãããé«ãåªå é äœãåãåããŸãã
ãã®æ žå¿ã«ãããŠã䞊è¡ã¬ã³ããªã³ã°ãšã¯ãäœæ¥ãã€ã³ããªãžã§ã³ãã«ã¹ã±ãžã¥ãŒãªã³ã°ããåå²ããããšã«ãã£ãŠãã¬ãŒã ã¿ã€ã ããžã§ããã管çããããšã§ãã
Reactã¹ã±ãžã¥ãŒã©ïŒäžŠè¡ã¬ã³ããªã³ã°ã®ãšã³ãžã³
Reactã¹ã±ãžã¥ãŒã©ã¯ã䞊è¡ã¬ã³ããªã³ã°ã®èåŸã«ããææ®è
ã§ãããã€ã¬ã³ããªã³ã°ããããäœãã¬ã³ããªã³ã°ãããããããŠãã¬ãŒã ã¿ã€ã ããžã§ããå
ã«åãŸãããã«äœæ¥ãã©ã®ããã«åå²ããããæ±ºå®ãã責任ããããŸãããã©ãŠã¶ã®requestIdleCallbackããã³requestAnimationFrameAPIãšé£æºããŠãã¿ã¹ã¯ãå¹ççã«ã¹ã±ãžã¥ãŒãªã³ã°ããŸãã
ä»çµã¿ïŒ
- ã¿ã¹ã¯ãã¥ãŒïŒ ã¹ã±ãžã¥ãŒã©ã¯ã¿ã¹ã¯ïŒäŸïŒã³ã³ããŒãã³ãã®æŽæ°ãã€ãã³ããã³ãã©ïŒã®ãã¥ãŒãç¶æããŸãã
- åªå 床ã¬ãã«ïŒ åã¿ã¹ã¯ã«ã¯åªå 床ã¬ãã«ãå²ãåœãŠãããŸããReactã«ã¯ãæé«ïŒäŸïŒãŠãŒã¶ãŒå ¥åïŒããæäœïŒäŸïŒããã¯ã°ã©ãŠã³ãã®ããŒã¿ãã§ããïŒãŸã§ã®é¢æ£çãªåªå 床ã¬ãã«ã®ã·ã¹ãã ããããŸãã
- ã¹ã±ãžã¥ãŒãªã³ã°ã®æ±ºå®ïŒ ãã©ãŠã¶ãã¢ã€ãã«ç¶æ ïŒã€ãŸãããã¬ãŒã ããžã§ããå ã«æéãããïŒã®ãšããã¹ã±ãžã¥ãŒã©ã¯ãã¥ãŒããæãåªå 床ã®é«ãã¿ã¹ã¯ãéžæããå®è¡ãã¹ã±ãžã¥ãŒã«ããŸãã
- ã¿ã€ã ã¹ã©ã€ã·ã³ã°ã®åäœïŒ ã¿ã¹ã¯ãçŸåšã®ãã¬ãŒã ã®æ®ãæéå ã«å®äºããã«ã¯å€§ããããå Žåãã¹ã±ãžã¥ãŒã©ã¯ããããã¹ã©ã€ã¹ãããŸããäœæ¥ã®äžéšãå®è¡ããåŸããã©ãŠã¶ã«å¶åŸ¡ãæ»ããæ®ãã®äœæ¥ãå°æ¥ã®ãã¬ãŒã ã«ã¹ã±ãžã¥ãŒã«ããŸãã
- äžæãšåéïŒ åªå 床ã®äœãã¿ã¹ã¯ãåŠçãããŠããéã«åªå 床ã®é«ãã¿ã¹ã¯ãå©çšå¯èœã«ãªã£ãå Žåãã¹ã±ãžã¥ãŒã©ã¯åªå 床ã®äœãã¿ã¹ã¯ãäžæããåªå 床ã®é«ãã¿ã¹ã¯ãåŠçããŠãããäžæãããã¿ã¹ã¯ãåŸã§åéã§ããŸãã
ãã®åçãªã¹ã±ãžã¥ãŒãªã³ã°ã«ãããReactã¯æãéèŠãªæŽæ°ãæåã«åŠçãããããšãä¿èšŒããã¡ã€ã³ã¹ã¬ããããããã¯ãããã®ãé²ããUIã®å¿çæ§ãç¶æããŸãã
å®è·µã«ããããã¬ãŒã ã¿ã€ã ããžã§ãã管çã®çè§£
ã¹ã±ãžã¥ãŒã©ã®äž»ãªç®æšã¯ãã¬ã³ããªã³ã°äœæ¥ãå©çšå¯èœãªãã¬ãŒã ã¿ã€ã ãè¶ ããªãããã«ããããšã§ããããã«ã¯ãããã€ãã®éèŠãªæŠç¥ãå«ãŸããŸãïŒ
1. äœæ¥ã®ã¿ã€ã ã¹ã©ã€ã·ã³ã°
Reactãå€§èŠæš¡ãªã³ã³ããŒãã³ãããªãŒã®ã¬ã³ããªã³ã°ãè€éãªç¶æ æŽæ°ã®åŠçãªã©ãéèŠãªã¬ã³ããªã³ã°æäœãå®è¡ããå¿ èŠãããå Žåãã¹ã±ãžã¥ãŒã©ãä»å ¥ããŸããæäœå šäœãäžåºŠã«å®äºãããïŒããã«ã¯äœããªç§ããããã16msã®ããžã§ãããè¶ ããå¯èœæ§ãããïŒä»£ããã«ãäœæ¥ãããå°ããªåäœã«åå²ããŸãã
äŸïŒ ã¬ã³ããªã³ã°ããå¿ èŠãããã¢ã€ãã ã®å€§ããªãªã¹ããæ³åããŠãã ãããåæã¢ãã«ã§ã¯ãReactã¯ãã¹ãŠã®ã¢ã€ãã ãäžåºŠã«ã¬ã³ããªã³ã°ããããšããŸããããã«50msããããšãUIã¯ãã®éããªãŒãºããŸããã¿ã€ã ã¹ã©ã€ã·ã³ã°ã䜿çšãããšãReactã¯æåã®10ã¢ã€ãã ãã¬ã³ããªã³ã°ããŠããåŠçãäžæããŸããæ¬¡ã®ãã¬ãŒã ã§æ¬¡ã®10ã¢ã€ãã ãã¬ã³ããªã³ã°ãããããç¹°ãè¿ããŸããããã«ããããŠãŒã¶ãŒã¯ãªã¹ããåŸã ã«è¡šç€ºãããã®ãèŠãŸãããUIã¯ãã®ããã»ã¹å šäœãéããŠå¿çæ§ãç¶æããŸãã
ã¹ã±ãžã¥ãŒã©ã¯çµéæéãåžžã«ç£èŠããŠããŸãããã¬ãŒã ããžã§ããã®çµããã«è¿ã¥ããŠããããšãæ€åºãããšãçŸåšã®äœæ¥ãäžæåæ¢ããæ®ããæ¬¡ã®å©çšå¯èœãªæ©äŒã«ã¹ã±ãžã¥ãŒã«ããŸãã
2. æŽæ°ã®åªå é äœä»ã
Reactã®ã¹ã±ãžã¥ãŒã©ã¯ãããŸããŸãªçš®é¡ã®æŽæ°ã«ç°ãªãåªå 床ã¬ãã«ãå²ãåœãŠãŸããããã«ãããããéèŠãªæŽæ°ãåªå ããŠãéèŠã§ãªãäœæ¥ãé å»¶ãããããšãã§ããŸãã
åªå 床ã¬ãã«ïŒæŠå¿µïŒïŒ
- `Immediate`ïŒæé«ïŒïŒ 峿ã®ãã£ãŒãããã¯ãå¿ èŠãªãŠãŒã¶ãŒå ¥åãªã©ã
- `UserBlocking`ïŒé«ïŒïŒ ãŠãŒã¶ãŒãåŸ ã£ãŠããéèŠãªUIã®æŽæ°ãäŸãã°ã¢ãŒãã«ã®è¡šç€ºããã©ãŒã éä¿¡ã®ç¢ºèªãªã©ã
- `Normal`ïŒäžïŒïŒ ããã«ã¯è¡šç€ºãããªãã¢ã€ãã ã®ãªã¹ãã®ã¬ã³ããªã³ã°ãªã©ãéèŠåºŠã®äœãæŽæ°ã
- `Low`ïŒäœïŒïŒ 峿ã®ãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ã«çŽæ¥åœ±é¿ããªãããŒã¿ã®ãã§ãããªã©ã®ããã¯ã°ã©ãŠã³ãã¿ã¹ã¯ã
- `Offscreen`ïŒæäœïŒïŒ çŸåšãŠãŒã¶ãŒã«èŠããŠããªãã³ã³ããŒãã³ãã
åªå 床ã®é«ãæŽæ°ãçºçããå ŽåïŒäŸïŒãŠãŒã¶ãŒããã¿ã³ãã¯ãªãã¯ããæïŒãã¹ã±ãžã¥ãŒã©ã¯é²è¡äžã®åªå 床ã®äœãäœæ¥ãå³åº§ã«äžæããŸããããã«ãããUIããŠãŒã¶ãŒã®ã¢ã¯ã·ã§ã³ã«å³åº§ã«å¿çããããšãä¿èšŒãããããŸããŸãªãããã¯ãŒã¯é床ãããã€ã¹èœåãæã€å€æ§ãªäººã ã䜿çšããã¢ããªã±ãŒã·ã§ã³ã«ãšã£ãŠéåžžã«éèŠã§ãã
3. äžŠè¡æ©èœãšãã®åœ±é¿
React 18ã§ã¯ã䞊è¡ã¬ã³ããªã³ã°ãšãã®ãã¬ãŒã ã¿ã€ã ããžã§ãã管çèœåãæŽ»çšããããã€ãã®æ©èœãå°å ¥ãããŸããïŒ
startTransitionïŒ ãã®APIã䜿çšãããšãç¹å®ã®ç¶æ æŽæ°ãããã©ã³ãžã·ã§ã³ããšããŠããŒã¯ã§ããŸãããã©ã³ãžã·ã§ã³ã¯ãUIããããã¯ããå¿ èŠã®ãªãç·æ¥æ§ã®äœãæŽæ°ã§ããããã¯ãå€§èŠæš¡ãªãªã¹ãã®ãã£ã«ã¿ãªã³ã°ãããŒãžéã®ããã²ãŒã·ã§ã³ãªã©ãUIã®æŽæ°ã«ããããªé å»¶ã蚱容ãããæäœã«æé©ã§ããã¹ã±ãžã¥ãŒã©ã¯UIã®å¿çæ§ãç¶æããããšãåªå ãããã©ã³ãžã·ã§ã³ã®æŽæ°ãããã¯ã°ã©ãŠã³ãã§ã¬ã³ããªã³ã°ããŸããuseDeferredValueïŒstartTransitionãšåæ§ã«ãuseDeferredValueã䜿çšãããšUIã®äžéšã®æŽæ°ãé å»¶ãããããšãã§ããŸããããã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«æªåœ±é¿ãäžããããšãªãé å»¶ãããããšãã§ãããã³ã¹ãã®ãããèšç®ãã¬ã³ããªã³ã°ã«åœ¹ç«ã¡ãŸããäŸãã°ããŠãŒã¶ãŒãæ€çŽ¢ããã¯ã¹ã«å ¥åããŠããå ŽåããŠãŒã¶ãŒãå ¥åãçµããããçãééã空ããŸã§æ€çŽ¢çµæã®ã¬ã³ããªã³ã°ãé å»¶ãããããšãã§ããŸãã- èªåãããã³ã°ïŒ 以åã®ããŒãžã§ã³ã®Reactã§ã¯ãã€ãã³ããã³ãã©å ã®è€æ°ã®ç¶æ æŽæ°ã¯ãŸãšããŠãããåŠçãããŠããŸãããããããPromiseãsetTimeoutããã€ãã£ãã€ãã³ããã³ãã©ããã®æŽæ°ã¯ãããåŠçãããŸããã§ãããReact 18ã¯ããã®çºçæºã«é¢ãããããã¹ãŠã®ç¶æ æŽæ°ãèªåçã«ãããåŠçããåã¬ã³ããªã³ã°ã®æ°ãå€§å¹ ã«åæžããããã©ãŒãã³ã¹ãåäžãããŸããããã¯ãå šäœçãªã¬ã³ããªã³ã°äœæ¥ãæžããããšã§ã鿥çã«ãã¬ãŒã ã¿ã€ã ããžã§ããã«è²¢ç®ããŸãã
ãããã®æ©èœã¯ãã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããäžã§ç»æçãªãã®ã§ããäœåž¯åå¹ ã®å°åã®ãŠãŒã¶ãŒã§ããã¹ã±ãžã¥ãŒã©ãæŽæ°ã®é©çšææã𿹿³ãã€ã³ããªãžã§ã³ãã«ç®¡çãããããããã¹ã ãŒãºãªããã²ãŒã·ã§ã³ãšã€ã³ã¿ã©ã¯ã·ã§ã³ãäœéšã§ããŸãã
䞊è¡ã¬ã³ããªã³ã°ã§ã¢ããªã±ãŒã·ã§ã³ãæé©åããããã®æŠç¥
Reactã®ã¹ã±ãžã¥ãŒã©ãå€ãã®éåŽåãæ ã£ãŠããŸãããéçºè ã¯ã¢ããªã±ãŒã·ã§ã³ãããã«æé©åããã°ããŒãã«ã«åªããããã©ãŒãã³ã¹ãçºæ®ãããããã®æŠç¥ãæ¡çšããããšãã§ããŸããããããã¹ãã§ãã
1. ã³ã¹ãã®ãããèšç®ãç¹å®ããåé¢ãã
æåã®ã¹ãããã¯ãèšç®ã³ã¹ããé«ãã³ã³ããŒãã³ããæäœãç¹å®ããããšã§ããReact DevTools Profilerã®ãããªããŒã«ã¯ãããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããã®ã«éåžžã«åœ¹ç«ã¡ãŸãã
å®çšçãªæŽå¯ïŒ ç¹å®ããããã³ã³ããŒãã³ãã«ã¯React.memoãå€ã«ã¯useMemoã䜿çšããŠé«äŸ¡ãªèšç®ãã¡ã¢åããããšãæ€èšããŠãã ããããã ããé床ãªã¡ã¢åã¯ãªãŒããŒããããçºçãããå¯èœæ§ããããããæ
éã«è¡ã£ãŠãã ããã
2. startTransitionãšuseDeferredValueãé©åã«æŽ»çšãã
ãããã®äžŠè¡æ©èœã¯ãéèŠã§ãªãæŽæ°ã管çããããã®æè¯ã®ããŒã«ã§ãã
äŸïŒ 倿°ã®ãŠã£ãžã§ãããããããã·ã¥ããŒããèããŠã¿ãŸãããããŠãŒã¶ãŒããããŠã£ãžã§ããå
ã®ããŒãã«ããã£ã«ã¿ãªã³ã°ããå Žåããã®ãã£ã«ã¿ãªã³ã°æäœã¯èšç®éçŽçãããããŸãããããã·ã¥ããŒãå
šäœããããã¯ãã代ããã«ããã£ã«ã¿ãªã³ã°ãããªã¬ãŒããç¶æ
æŽæ°ãstartTransitionã§ã©ããããŸããããã«ãããããŒãã«ããã£ã«ã¿ãªã³ã°ãããŠããéãããŠãŒã¶ãŒã¯ä»ã®ãŠã£ãžã§ãããšå¯Ÿè©±ã§ããŸãã
äŸïŒã°ããŒãã«ãªæèïŒïŒ å€åœç±ã®eã³ããŒã¹ãµã€ãã§ã¯ãååäžèЧããŒãžã§ãã£ã«ã¿ãé©çšããã®ã«æéããããå ŽåããããŸãããã£ã«ã¿æŽæ°ã«startTransitionã䜿çšããããšã§ãããã²ãŒã·ã§ã³ããã«ãŒãã«è¿œå ããã¿ã³ãªã©ã®ä»ã®UIèŠçŽ ãå¿çæ§ãç¶æããæ¥ç¶ãé
ãããŸãã¯æ§èœã®äœãããã€ã¹ã䜿çšããŠãããŠãŒã¶ãŒã«ããè¯ãäœéšãæäŸã§ããŸãã
3. ã³ã³ããŒãã³ããå°ãããçŠç¹ãçµã£ããã®ã«ä¿ã€
ããå°ãããçŠç¹ãçµãããã³ã³ããŒãã³ãã¯ãã¹ã±ãžã¥ãŒã©ã管çãããããªããŸããã³ã³ããŒãã³ããå°ãããšãéåžžã¬ã³ããªã³ã°æéãçããªãããã¬ãŒã ããžã§ããå ã«åãããããªããŸãã
å®çšçãªæŽå¯ïŒ 倧ããè€éãªã³ã³ããŒãã³ãããããå°ããåå©çšå¯èœãªã³ã³ããŒãã³ãã«åè§£ããŸããããã¯ããã©ãŒãã³ã¹ãåäžãããã ãã§ãªããã³ãŒãã®ä¿å®æ§ãšã°ããŒãã«ãªéçºããŒã å šäœã§ã®åå©çšæ§ãé«ããŸãã
4. ããŒã¿ååŸãšç¶æ 管çãæé©åãã
ããŒã¿ã®ååŸãšç®¡çã®æ¹æ³ã¯ãã¬ã³ããªã³ã°ã®ããã©ãŒãã³ã¹ã«å€§ããªåœ±é¿ãäžããŸããéå¹çãªããŒã¿ååŸã¯ãäžèŠãªåã¬ã³ããªã³ã°ã倧éã®ããŒã¿ãåæã«åŠçãããåå ãšãªããŸãã
å®çšçãªæŽå¯ïŒ ããŒãžããŒã·ã§ã³ãé å»¶èªã¿èŸŒã¿ãããŒã¿æ£èŠåãªã©ãå¹ççãªããŒã¿ååŸæŠç¥ãå®è£ ããŸããReact QueryãApollo Clientãªã©ã®ã©ã€ãã©ãªã¯ããµãŒããŒã®ç¶æ ã广çã«ç®¡çããã³ã³ããŒãã³ããšã¹ã±ãžã¥ãŒã©ã®è² æ ã軜æžããã®ã«åœ¹ç«ã¡ãŸãã
5. ã³ãŒãåå²ãšé å»¶èªã¿èŸŒã¿
å€§èŠæš¡ãªã¢ããªã±ãŒã·ã§ã³ãç¹ã«åž¯åå¹ ãå¶çŽãšãªãå¯èœæ§ã®ããã°ããŒãã«ãªèŠèŽè ã察象ãšããã¢ããªã±ãŒã·ã§ã³ã§ã¯ãã³ãŒãåå²ãšé å»¶èªã¿èŸŒã¿ãäžå¯æ¬ ã§ããããã«ããããŠãŒã¶ãŒã¯çŸåšã®ãã¥ãŒã«å¿ èŠãªJavaScriptã³ãŒãã®ã¿ãããŠã³ããŒãããããšãä¿èšŒãããŸãã
äŸïŒ è€éãªã¬ããŒãã£ã³ã°ããŒã«ã«ã¯ãå€ãã®ç°ãªãã¢ãžã¥ãŒã«ããããããããŸãããReact.lazyãšSuspenseã䜿çšããããšã§ããããã®ã¢ãžã¥ãŒã«ããªã³ããã³ãã§èªã¿èŸŒãããšãã§ããŸããããã«ãããåæããŒãæéãççž®ãããã¹ã±ãžã¥ãŒã©ã¯ã¢ããªã±ãŒã·ã§ã³ã®å¯èŠéšåã®ã¬ã³ããªã³ã°ã«éäžã§ããŸãã
6. ãããã¡ã€ãªã³ã°ãšå埩çãªæé©å
ããã©ãŒãã³ã¹ã®æé©åã¯ç¶ç¶çãªããã»ã¹ã§ããç¹ã«æ°ããæ©èœã远å ããããå€§å¹ ãªå€æŽãå ãããããåŸã¯ã宿çã«ã¢ããªã±ãŒã·ã§ã³ããããã¡ã€ãªã³ã°ããŠãã ããã
å®çšçãªæŽå¯ïŒ æ¬çªãã«ãïŒãŸãã¯æ¬çªãæš¡å£ããã¹ããŒãžã³ã°ç°å¢ïŒã§React DevTools Profilerã䜿çšããŠãããã©ãŒãã³ã¹ã®äœäžãç¹å®ããŸããã¬ã³ããªã³ã°äžã«ã©ãã§æéãè²»ããããŠãããããããŠã¹ã±ãžã¥ãŒã©ããããã®ã¿ã¹ã¯ãã©ã®ããã«ç®¡çããŠããããçè§£ããããšã«çŠç¹ãåœãŠãŠãã ããã
ã°ããŒãã«ãªèæ ®äºé ãšãã¹ããã©ã¯ãã£ã¹
ã°ããŒãã«ãªèŠèŽè åãã«ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããå Žåããã¬ãŒã ã¿ã€ã ããžã§ããã®ç®¡çã¯ããã«éèŠã«ãªããŸãããŠãŒã¶ãŒç°å¢ã®å€æ§æ§ã¯ãããã©ãŒãã³ã¹ã«å¯Ÿããç©æ¥µçãªã¢ãããŒããèŠæ±ããŸãã
1. ãããã¯ãŒã¯ã®é å»¶ãšåž¯åå¹
äžçã®ããŸããŸãªå°åã®ãŠãŒã¶ãŒã¯ã倧ããç°ãªããããã¯ãŒã¯ç¶æ³ãçµéšããŸããé »ç¹ã§å€§èŠæš¡ãªããŒã¿è»¢éã«å€§ããäŸåããã¢ããªã±ãŒã·ã§ã³ã¯ãäœåž¯åå¹ ã®å°åã§ã¯ããã©ãŒãã³ã¹ãäœäžããŸãã
ãã¹ããã©ã¯ãã£ã¹ïŒ ããŒã¿ãã€ããŒããæé©åãããã£ãã·ã¥ã¡ã«ããºã ãæŽ»çšããé©åãªå Žåã«ã¯ãªãã©ã€ã³ãã¡ãŒã¹ãæŠç¥ãæ€èšããŸããã³ã¹ãã®ãããã¯ã©ã€ã¢ã³ããµã€ãã®èšç®ããçµ¶ãéãªããµãŒããŒéä¿¡ã«é Œãã®ã§ã¯ãªããã¹ã±ãžã¥ãŒã©ã«ãã£ãŠå¹ççã«åŠçãããããã«ããŸãã
2. ããã€ã¹ã®èœå
äžçäžã§äœ¿çšãããŠããããã€ã¹ã®ç¯å²ã¯ããã€ãšã³ãã®ã¹ããŒããã©ã³ããã¹ã¯ããããããå€ããŠæ§èœã®äœãã³ã³ãã¥ãŒã¿ãã¿ãã¬ãããŸã§ãåçã«ç°ãªããŸãã
ãã¹ããã©ã¯ãã£ã¹ïŒ ã°ã¬ãŒã¹ãã«ãã°ã©ããŒã·ã§ã³ã念é ã«çœ®ããŠèšèšããŸããäžŠè¡æ©èœã䜿çšããŠãæ§èœã®äœãããã€ã¹ã§ãã¢ããªã±ãŒã·ã§ã³ã䜿çšå¯èœã§å¿çæ§ãç¶æã§ããããã«ããŸããèšç®è² è·ã®é«ãã¢ãã¡ãŒã·ã§ã³ããšãã§ã¯ãã¯ãäžå¯æ¬ ã§ãããããŸããŸãªããã€ã¹ã§ããã©ãŒãã³ã¹ã培åºçã«ãã¹ããããŠããªãéãé¿ããŠãã ããã
3. åœéåïŒi18nïŒãšå°ååïŒl10nïŒ
ã¹ã±ãžã¥ãŒã©ã«çŽæ¥é¢ä¿ããããã§ã¯ãããŸããããã¢ããªã±ãŒã·ã§ã³ã®åœéåãšå°ååã®ããã»ã¹ã¯ãããã©ãŒãã³ã¹ã®èæ ®äºé ãå°å ¥ããå¯èœæ§ããããŸãã倧ããªç¿»èš³ãã¡ã€ã«ãè€éãªãã©ãŒãããããžãã¯ã¯ãã¬ã³ããªã³ã°ã®ãªãŒããŒããããå¢å ãããããšããããŸãã
ãã¹ããã©ã¯ãã£ã¹ïŒ i18n/l10nã©ã€ãã©ãªãæé©åããåçã«èªã¿èŸŒãŸãã翻蚳ãå¹ççã«åŠçãããããã«ããŸããã¹ã±ãžã¥ãŒã©ã¯ãããã«èŠããªãããŒã«ã©ã€ãºãããã³ã³ãã³ãã®ã¬ã³ããªã³ã°ãé å»¶ãããããšã§åœ¹ç«ã¡ãŸãã
4. 倿§ãªç°å¢ã§ã®ãã¹ã
å®éã®ã°ããŒãã«ãªç¶æ³ãã·ãã¥ã¬ãŒãããç°å¢ã§ã¢ããªã±ãŒã·ã§ã³ããã¹ãããããšãéèŠã§ãã
ãã¹ããã©ã¯ãã£ã¹ïŒ ãã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããŠãããŸããŸãªãããã¯ãŒã¯ç¶æ³ãããã€ã¹ã¿ã€ããã·ãã¥ã¬ãŒãããŸããå¯èœã§ããã°ãããŸããŸãªå°ççãªå Žæãç°ãªãããŒããŠã§ã¢æ§æãæã€å人ãšãŠãŒã¶ãŒãã¹ãã宿œããŸãã
Reactã¬ã³ããªã³ã°ã®æªæ¥
Reactã®äžŠè¡ã¬ã³ããªã³ã°ãžã®éã®ãã¯ãŸã é²åããŠããŸãããšã³ã·ã¹ãã ãæçããããå€ãã®éçºè ããããã®æ°ãããã©ãã€ã ãæ¡çšããã«ã€ããŠãã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ã管çããããã®ããã«æŽç·ŽãããããŒã«ããã¯ããã¯ãæåŸ ã§ããŸãã
ãã¬ãŒã ã¿ã€ã ããžã§ãã管çãžã®éç¹ã¯ããã¹ãŠã®ãŠãŒã¶ãŒã«ãã©ãã«ããŠãé«å質ã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸãããšããReactã®ã³ãããã¡ã³ãã®èšŒã§ãã䞊è¡ã¬ã³ããªã³ã°ãšãã®ã¹ã±ãžã¥ãŒãªã³ã°ã¡ã«ããºã ã®ååãçè§£ãé©çšããããšã§ãéçºè ã¯æ©èœãè±å¯ãªã ãã§ãªãããŠãŒã¶ãŒã®å Žæãããã€ã¹ã«é¢ããããéåžžã«é«æ§èœã§å¿çæ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸãã
çµè«
Reactã®äžŠè¡ã¬ã³ããªã³ã°ã¹ã±ãžã¥ãŒã©ã¯ããã®æŽç·Žããããã¬ãŒã ã¿ã€ã ããžã§ãã管çã«ããã髿§èœãªWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããäžã§å€§ããªé£èºã衚ããŠããŸããäœæ¥ãåå²ããæŽæ°ãåªå é äœä»ããããã©ã³ãžã·ã§ã³ãé å»¶å€ã®ãããªæ©èœãæå¹ã«ããããšã§ãReactã¯è€éãªã¬ã³ããªã³ã°æäœäžã§ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãå¿çæ§ãç¶æããããšãä¿èšŒããŸãã
ã°ããŒãã«ãªèŠèŽè ã«ãšã£ãŠããã®æè¡ã¯åãªãæé©åã§ã¯ãããŸãããããã¯å¿ èŠäžå¯æ¬ ãªãã®ã§ããããŸããŸãªãããã¯ãŒã¯ç¶æ³ãããã€ã¹ã®èœåããŠãŒã¶ãŒã®æåŸ ã«ãã£ãŠçããã®ã£ãããåããŸããäžŠè¡æ©èœãç©æ¥µçã«æŽ»çšããããŒã¿åŠçãæé©åãããããã¡ã€ãªã³ã°ãšãã¹ããéããŠããã©ãŒãã³ã¹ã«çŠç¹ãåœãŠç¶ããããšã§ãéçºè ã¯äžçäžã®ãŠãŒã¶ãŒãåã°ããçã«åªãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåµé ã§ããŸãã
Reactã®ã¹ã±ãžã¥ãŒã©ããã¹ã¿ãŒããããšã¯ãçŸä»£ã®Webéçºã®å¯èœæ§ãæå€§éã«åŒãåºãéµã§ãã䞊è¡åŠçãåãå ¥ãã誰ã«ãšã£ãŠãé«éã§ãã¹ã ãŒãºã§ãã¢ã¯ã»ã¹ããããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããŸãããã